<template>
  <div>
    <el-row>
      <el-form :rules="rules" style="text-align: left" label-width="100px" ref="addForm" :model="addForm">
        <el-col :span="24">
          <el-form-item label="序号：" prop="ordinal">
            <el-select  @change="changeXh" v-model="addForm.ordinal" placeholder="请选择">
              <el-option v-for="(item,index) in serialNumberList" :key="item.id" :label="item.ordinal"
                         :value="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="indexClass">
          <el-form-item label="本金：" prop="principal">
            <el-input v-model="addForm.principal" type="number"></el-input>
          </el-form-item>
          <span class="indexBox">元</span>
        </el-col>

        <el-col :span="12" class="indexClass">
          <el-form-item label="其他费用：" prop="otherAmount">
            <el-input v-model="addForm.otherAmount" type="number"></el-input>
          </el-form-item>
          <span class="indexBox">元</span>
        </el-col>
      </el-form>
    </el-row>
    <span class="dialog-footer df-botton">
        <el-button @click="Cancel">取消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
    </span>

  </div>
</template>

<script>
import { repayDetailAllocate, getRepayDetailRecords } from "../../assets/js/api";

export default {
  name: "distribution",
  props: ["orderNumber"],
  data() {
    return {
      addForm: {
        ordinal:'',
        principal:'',
        otherAmount:'',
      },
      serialNumberList: [],
      currentItem: {},
      rules: {
        ordinal: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
        principal: [
          { required: true, message: "请输入", trigger: "blur" }
        ],
        otherAmount: [
          { required: true, message: "请输入", trigger: "blur" }
        ]

      }

    };
  },
  mounted() {
    this.getSerialNumber();
  },
  methods: {
    //选择序号
    changeXh(index) {
      // console.log(index)
      this.currentItem = this.serialNumberList[index];
    },
    //获取序号
    getSerialNumber() {
      getRepayDetailRecords({ orderNumber: this.orderNumber }).then(res => {
        this.serialNumberList = res.data;
      });
    },
    //确定
    submit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          // console.log(this.addForm.principal)
            this.currentItem.principal=this.addForm.principal;
            this.currentItem.otherAmount=this.addForm.otherAmount;
            repayDetailAllocate(this.currentItem).then(res => {
              this.$message.success("提交成功");
              this.$emit("Refresh");
              this.Cancel();
            });
          }

      });
    },
    //取消
    Cancel() {
      this.$refs.addForm.resetFields();
      this.$emit("cancel");
    }
  }
};
</script>

<style scoped>
/deep/ .indexClass {
  position: relative;
}

.indexBox {
  position: absolute;
  top: 10px;
  right: 5%;
  /*font-size: 18px;*/
  /*color: red;*/
}


::v-deep .el-form-item__content {
  width: 220px;
}

</style>